<template>
    <el-form :data="form">
      <el-form-item label="商品名称">
        <el-input v-model="form.keyword" />
      </el-form-item>
      <el-form-item>
        <el-button @click="searchHandle">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="description" label="产品介绍" />
    </el-table>
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="pageChangeHandle"
      @current-change="pageSizeChangeHandle"
    />
  </template>
  <script setup lang="ts">
  import useTable from "@/hooks/useTable";
  import { reactive } from "vue";
  import { getProductListApi } from "./api";
  
  const form = reactive({
    keyword: "",
  });
  
  const {
    list,
    pageNum,
    pageSize,
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle,
  } = useTable(getProductListApi, form);
  </script>
  <style lang="less" scoped></style>
  